<template>
  <div class="process">
    <div class="overview">
      <el-row>
        <el-col :span="8">
          <div class="bg-purple">
            <span class="attribute">营销任务ID：</span>
            <span class="val">91120116717234618E</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bg-purple">
            <span class="attribute">企业名称：</span>
            <span class="val">康希诺生物有限公司</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bg-purple">
            <span class="attribute">处理人：</span>
            <span class="val">李丽英</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="bg-purple">
            <span class="attribute">处理时间：</span>
            <span class="val">2009-01-13 09:20:10</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="bg-purple" style="padding-left: 20%;">
            <span class="attribute">地址：</span>
            <span class="val">天津经济技术开发区西区南大街185号西区</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="processPic">
      <el-row type="flex"  :class="{'row-li':(index+1)%2!==0, 'reverse-li':(index+1)%2===0}"
       v-for="(item, index) in list" :key="index">
        <template v-if="(index+1)%2!==0">
          <el-col :span="8"  v-for="(content, key) in item" :key="key+index" >
            <div class="bg-purple">
               <img :src="require('@/assets/img/work/process/arrow.png')" v-if="key!==item.length-1"
                 class="arrow img-arrow-right" alt="" />
              <img :src="require('@/assets/img/work/process/arrow.png')"
                  v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen"
                 class="img-arrow-down arrow"   alt="" />
              <div class="box">
                <div class="bkBox" >
                  <img :src="require('@/assets/img/work/process/logo1_2.png')" class="img" alt="" />
                </div>
                <img :src="require('@/assets/img/work/process/processIng1.png')" class="iconImg" alt="" />
                <div class="name">商机认领</div>
                <div class="text">
                  <span>营销任务ID：20116717234618E</span>
                </div>
                <div class="text">
                  <span>处理人：徐晨飞</span>
                </div>
                <div class="text">
                  <span>处理时间：2022-01-19 15:43:34</span>
                </div>
              </div>
            </div>
          </el-col>
        </template>
        <template v-else-if="(index+1)%2===0">
          <el-col :span="8" v-for="(i, key) in item" :key="key+index">
            <div class="bg-purple">
              <img :src="require('@/assets/img/work/process/arrow.png')" v-if="key!==0"
                style="transform: rotateZ(180deg);" class="img-arrow-right arrow" alt="" />
              <img :src="require('@/assets/img/work/process/arrow.png')"
                  v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen "
                 class="img-arrow-down arrow"    alt="" />
              <div class="box">
                <div class="bkBox" style="background-image: url('../../../../assets/img/work/process/bkGround1.png');">
                  <img :src="require('@/assets/img/work/process/logo1_2.png')" class="img" alt="" />
                </div>
                <img :src="require('@/assets/img/work/process/processIng1.png')" class="iconImg" alt="" />
                <div class="name">商机认领</div>
                <div class="text">
                  <span>营销任务ID：20116717234618E</span>
                </div>
                <div class="text">
                  <span>处理人：徐晨飞</span>
                </div>
                <div class="text">
                  <span>处理时间：2022-01-19 15:43:34</span>
                </div>
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>

  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    name: 'processShow', //流程进度展示
    components: {

    },
    data() {
      return {
        originArray1:[{

        }],
        originArray: [1,2,3,4,5,6], // 未处理的数组
        list: [[1,2,3],[4,5,6]], // 处理后的二维数组
        maxLen: 3 // 设定一行多少个
      }
    },
    computed: {
      ...mapGetters({
        codeCombo: 'getCodeCombo',
        permissionList: 'getPermission',
        userInfo: 'getUserInfo',
      }),
    },
    activated() {

    },
    created() {
      this.init();
    },
    methods: {
      init(){

      }
    },
  }
</script>

<style lang="scss" scoped>
  .process {
    max-width: 1220px;
    min-height: 1110px;
    border: 1px solid #CCCCCC;
    .processPic {
      .row-li {
        flex-direction: row;
      }
      .reverse-li {
        flex-direction: row-reverse;
      }
      .bg-purple {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 144px;
        .arrow{
          width: 56px;
          height: 56px;
          position: absolute;
        }
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 220px;
          height: 400px;
          display: flex;
          justify-content: center;
          .bkBox{
            width: 201px;
            height: 184px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16px;
            background-size: 100% 100%;
            background-image: url('../../../../assets/img/work/process/bkGround2.png');
          }

        }
        .img {

        }
        .img-arrow-right{
          right: 0%;
          margin-right: -28px;
          top:50%;
          margin-top: -28px;
        }
        .img-arrow-down{
          bottom: 0;
          margin-bottom: -92px;
          left:50%;
          margin-left: -28px;
          transform: rotateZ(90deg);
        }
        .name {
          width: 220px;
          height: 40px;
          background: linear-gradient(90deg, rgba(224, 235, 248, 0.1) 0%, #E0EBF8 52%, rgba(224, 235, 248, 0.1) 100%);
          font-size: 18px;
          font-weight: bold;
          color: #004DA1;
          line-height: 40px;
          margin-bottom: 16px;
          text-align: center;
        }

        .text {
          width: 100%;
          height: 14px;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          color: #555555;
          margin-bottom: 16px;
        }

        .iconImg {
          height: 40px;
          width: 40px;
          margin-bottom: 16px;
        }

      }


    }

    .overview {
      margin-top: 56px;
      margin-bottom: 56px;
      font-size: 14px;
      font-weight: 400;

      .bg-purple {
        width: 100%;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding-left: 40%;
      }

      .attribute {
        color: #555555;
        margin-right: 3px;
      }

      .val {
        color: #888888;
      }

    }
  }
</style>
